import {Component} from 'react';
import PropTypes from "prop-types";
import "./index.scss"

export default class Item extends Component {
  static propTypes = {
    id: PropTypes.string.isRequired,
    name: PropTypes.string.isRequired,
    done: PropTypes.bool.isRequired,
    chooseTodo: PropTypes.func,
    delTodo: PropTypes.func,
  }

  state= {
    mouse: false
  }

  // 鼠标移入、移出 改变列表状态
  handleMouse = (mouse) => {
    return () => {
      this.setState({mouse})
    }
  }

  // 选中、取消选中 改变状态
  handleChecked = (id) => {
    return (event) => {
      this.props.chooseTodo(id, event.target.checked)
    }
  }

  // 删除
  handleDel = (id) => {
    this.props.delTodo(id)
  }

  render() {
    const {id, name, done} = this.props
    const {mouse} = this.state
    return (
      <div
        className="todo-item"
        onMouseEnter={this.handleMouse(true)}
        onMouseLeave={this.handleMouse(false)}
        style={{background: mouse ? '#505050' : ''}}
      >
        <div className="left">
          <input type="checkbox" checked={done} onChange={this.handleChecked(id)}/>
          <span>{name}</span>
        </div>
        <button style={{display: mouse ? "block" : "none"}} onClick={() => this.handleDel(id)}>删除</button>
      </div>
    );
  }
}
